<script setup>
import { version } from "vue";
import CssClass from "../components/Animation/cssClass.vue";
import StateAnimation from "../components/Animation/stateAnimation.vue";
import DragMe from "../components/Animation/DragMe.vue";
import WatchAnimation from "../components/Animation/WatchAnimation.vue";

import { useDebouncedRef } from '../utils/debouncedRef'
const text = useDebouncedRef('hello', 1000)
</script>

<template>
  <div>
    <h3>css Class 动画</h3>
    <CssClass></CssClass>
    <hr />
    <h3>状态驱动的动画</h3>
    <StateAnimation></StateAnimation>
    <hr />
    <h3>DragMe</h3>
    <DragMe></DragMe>
    <hr />
    <h3>基于侦听器的动画</h3>
    <WatchAnimation></WatchAnimation>
    <hr />
    <h3>{{version}}</h3>
    <hr />
    <h3>创建一个防抖 ref，即只在最近一次 set 调用后的一段固定间隔后再调用</h3>
    <div>
      <p>
        This text only updates 1 second after you've stopped typing: <span>{{ text }}</span>
      </p>
      <input v-model="text" />
    </div>
  </div>
</template>